Bemästra CSS @when-regeln: Villkorlig stilapplicering för dynamisk webbdesign

CSS-regeln @when, en del av specifikationen CSS Conditional Rules Module Level 5, erbjuder ett kraftfullt sätt att tillämpa stilar villkorligt baserat på vissa förutsättningar. Den går bortom traditionella mediafrågor och möjliggör mer detaljerad kontroll över stilsättning baserat på container-storlekar, anpassade egenskaper och till och med elementens tillstånd. Detta kan avsevärt förbättra responsiviteten och anpassningsbarheten i dina webbdesigner, vilket leder till en bättre användarupplevelse på olika enheter och i olika sammanhang.

Förstå grunderna i @when-regeln

I grund och botten tillhandahåller @when-regeln en mekanism för att köra ett block med CSS-stilar endast när ett specifikt villkor är uppfyllt. Detta liknar if-satser i programmeringsspråk. Låt oss bryta ner syntaxen:

@when villkor {
  /* CSS-regler att tillämpa när villkoret är sant */
}

villkoret kan baseras på olika faktorer, inklusive:

• Container Queries: Stilsätta element baserat på storleken på deras innehållande element snarare än visningsfönstret.
• Anpassade tillstånd: Reagera på användarinteraktioner eller applikationstillstånd.
• CSS-variabler: Tillämpa stilar baserat på värdet av anpassade CSS-egenskaper.
• Intervallfrågor (Range Queries): Kontrollera om ett värde faller inom ett specifikt intervall.

Kraften med @when ligger i dess förmåga att skapa verkligt komponentbaserad stilsättning. Du kan kapsla in stilsättningslogik inom en komponent och säkerställa att den endast tillämpas när komponenten uppfyller vissa kriterier, oavsett den omgivande sidlayouten.

Container Queries med @when

Container queries är en revolutionerande förändring för responsiv design. De låter element anpassa sin stilsättning baserat på dimensionerna hos sin föräldracontainer, inte bara visningsfönstrets bredd. Detta möjliggör mer flexibla och återanvändbara komponenter. Föreställ dig en kortkomponent som visas olika beroende på om den placeras i en smal sidofält eller ett brett huvudinnehållsområde. @when-regeln gör detta otroligt enkelt.

Grundläggande exempel på Container Query

Först måste du deklarera en container. Det kan du göra med egenskapen container-type:

.container {
  container-type: inline-size;
}

inline-size gör att containern kan frågas baserat på dess inline-storlek (bredd i horisontella skrivlägen, höjd i vertikala skrivlägen). Du kan också använda size för att fråga båda dimensionerna, eller normal för att inte skapa en query-container.

Nu kan du använda @container (ofta i kombination med @when) för att tillämpa stilar baserat på containerns storlek:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

I det här exemplet ändras .card-layouten baserat på containerns bredd. När containern är minst 300px bred visas bilden och texten sida vid sida. När den är smalare staplas de vertikalt.

Här är hur vi kan använda @when för att uppnå samma resultat, potentiellt kombinerat med @container beroende på webbläsarstöd och kodningspreferens (eftersom @when erbjuder mer flexibilitet i vissa scenarier utöver bara container-storlek):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

I detta fall är `card-container` ett containernamn som tilldelats med `@container`, och `container(card-container)` i `@when` kontrollerar om den angivna container-kontexten är aktiv. Notera: Stöd för `container()`-funktionen och den exakta syntaxen kan variera mellan webbläsare och versioner. Konsultera kompatibilitetstabeller för webbläsare innan du implementerar.

Praktiska internationella exempel

• Produktlistningar för e-handel: Visa produktlistningar olika baserat på det tillgängliga utrymmet i kategorisidans rutnät. En mindre container kan visa endast produktbild och pris, medan en större container kan inkludera en kort beskrivning och betyg. Detta är användbart i olika regioner med varierande internethastigheter och enhetstyper, vilket möjliggör optimerade upplevelser på både avancerade datorer och mobila anslutningar med låg bandbredd i utvecklingsländer.
• Sammanfattningar av nyhetsartiklar: Justera längden på artikelsammanfattningar som visas på en nyhetswebbplats hemsida baserat på containerns bredd. I en smal sidofält, visa endast en rubrik och några få ord; i huvudinnehållsområdet, ge en mer detaljerad sammanfattning. Tänk på språkskillnader, där vissa språk (t.ex. tyska) tenderar att ha längre ord och fraser, vilket påverkar det utrymme som krävs för sammanfattningar.
• Widgets för instrumentpaneler: Modifiera layouten för widgets på en instrumentpanel baserat på deras container-storlek. En liten widget kan visa ett enkelt diagram, medan en större kan inkludera detaljerad statistik och kontroller. Skräddarsy instrumentpanelens upplevelse efter den specifika användarens enhet och skärmstorlek, med hänsyn till kulturella preferenser för datavisualisering. Till exempel kan vissa kulturer föredra stapeldiagram framför cirkeldiagram.

Använda @when med anpassade tillstånd

Anpassade tillstånd låter dig definiera dina egna tillstånd för element och utlösa stiländringar baserat på dessa tillstånd. Detta är särskilt användbart i komplexa webbapplikationer där traditionella CSS-pseudoklasser som :hover och :active är otillräckliga. Medan anpassade tillstånd fortfarande utvecklas i webbläsarimplementeringar, erbjuder @when-regeln en lovande väg för att kontrollera stilar baserat på dessa tillstånd när stödet mognar.

Konceptuellt exempel (med CSS-variabler för att simulera tillstånd)

Eftersom inbyggt stöd för anpassade tillstånd ännu inte är universellt tillgängligt, kan vi simulera det med CSS-variabler och JavaScript.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

I det här exemplet använder vi en CSS-variabel --is-active för att spåra elementets tillstånd. JavaScript-koden växlar värdet på denna variabel när elementet klickas. @when-regeln tillämpar sedan en annan bakgrundsfärg när --is-active är lika med 1. Även om detta är en tillfällig lösning, visar det konceptet med villkorlig stilsättning baserat på tillstånd.

Potentiella framtida användningsfall med äkta anpassade tillstånd

När äkta anpassade tillstånd implementeras kan syntaxen se ut ungefär så här (notera: detta är spekulativt och baserat på förslag):

.my-element {
  /* Initiala stilar */
}

@when :state(my-custom-state) {
  .my-element {
    /* Stilar när det anpassade tillståndet är aktivt */
  }
}

Du skulle sedan använda JavaScript för att ställa in och ta bort det anpassade tillståndet:

element.states.add('my-custom-state'); // Aktivera tillståndet
element.states.remove('my-custom-state'); // Avaktivera tillståndet

Detta skulle möjliggöra otroligt finkornig kontroll över stilsättning baserat på applikationslogik.

Överväganden för internationalisering och lokalisering

• Höger-till-vänster-språk (RTL): Anpassade tillstånd kan användas för att anpassa layouten och stilsättningen för komponenter för RTL-språk som arabiska och hebreiska. Till exempel, spegla layouten för en navigeringsmeny när ett specifikt RTL-tillstånd är aktivt.
• Tillgänglighet: Använd anpassade tillstånd för att erbjuda förbättrade tillgänglighetsfunktioner, såsom att markera fokuserade element eller ge alternativa textbeskrivningar när ett användarinteraktionstillstånd utlöses. Se till att dessa tillståndsändringar kommuniceras effektivt till hjälpmedelsteknik.
• Kulturella designpreferenser: Anpassa det visuella utseendet på komponenter baserat på kulturella designpreferenser. Till exempel, använda olika färgscheman eller ikoner baserat på användarens plats eller språk.

Arbeta med CSS-variabler och intervallfrågor

@when-regeln kan också användas med CSS-variabler för att skapa dynamiska och anpassningsbara stilar. Du kan tillämpa stilar baserat på värdet av en CSS-variabel, vilket gör att användare kan anpassa utseendet på din webbplats utan att skriva någon kod.

Exempel: Temabyte

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

I det här exemplet styr variabeln --theme-color bakgrundsfärgen på body. När den är inställd på #000, ändrar @when-regeln --text-color till #fff, vilket skapar ett mörkt tema. Användare kan sedan ändra värdet på --theme-color med JavaScript eller genom att ställa in en annan CSS-variabel i en användarstilmall.

Intervallfrågor (Range Queries)

Intervallfrågor låter dig kontrollera om ett värde faller inom ett specifikt intervall. Detta kan vara användbart för att skapa mer komplexa villkorliga stilar.

@when (400px <= width <= 800px) {
  .element {
    /* Stilar som tillämpas när bredden är mellan 400px och 800px */
  }
}

Den exakta syntaxen och stödet för intervallfrågor inom @when kan dock variera. Det är lämpligt att konsultera de senaste specifikationerna och webbläsarnas kompatibilitetstabeller. Container queries erbjuder ofta ett mer robust och välstödt alternativ för storleksbaserade villkor.

Global tillgänglighet och användarpreferenser

• Högkontrastteman: Använd CSS-variabler och @when-regeln för att implementera högkontrastteman som passar användare med synnedsättningar. Låt användare anpassa färgpaletten och teckenstorlekarna för att möta deras specifika behov.
• Reducerad rörelse: Respektera användarens preferens för reducerad rörelse genom att använda CSS-variabler för att inaktivera animationer och övergångar när användaren har aktiverat inställningen för "reducerad rörelse" i sitt operativsystem. Mediafrågan prefers-reduced-motion kan kombineras med @when för mer exakt kontroll.
• Justering av teckenstorlek: Låt användare justera webbplatsens teckenstorlek med hjälp av CSS-variabler. Använd @when-regeln för att anpassa layouten och avståndet mellan element för att rymma olika teckenstorlekar, vilket säkerställer läsbarhet och användbarhet för alla användare.

Bästa praxis och överväganden

• Webbläsarkompatibilitet: @when-regeln är fortfarande relativt ny, och webbläsarstödet är ännu inte universellt. Kontrollera alltid webbläsarnas kompatibilitetstabeller innan du använder den i produktion. Överväg att använda polyfills eller reservlösningar för äldre webbläsare. I slutet av 2024 är webbläsarstödet fortfarande begränsat, och att förlita sig starkt på @container och förnuftig användning av CSS-variabler med JavaScript-fallbacks är ofta ett mer praktiskt tillvägagångssätt.
• Specificitet: Var medveten om CSS-specificitet när du använder @when-regeln. Se till att dina villkorliga stilar är tillräckligt specifika för att åsidosätta eventuella motstridiga stilar.
• Underhållbarhet: Använd CSS-variabler och kommentarer för att göra din kod mer läsbar och underhållbar. Undvik att skapa alltför komplexa villkorliga regler som är svåra att förstå och felsöka.
• Prestanda: Även om @when-regeln kan förbättra prestandan genom att minska mängden CSS som behöver tolkas, är det viktigt att använda den med omdöme. Överanvändning av villkorliga regler kan påverka prestandan negativt, särskilt på äldre enheter.
• Progressiv förbättring (Progressive Enhancement): Använd progressiv förbättring för att säkerställa att din webbplats fungerar bra även om webbläsaren inte stöder @when-regeln. Ge en grundläggande, funktionell upplevelse för alla användare och förbättra den sedan progressivt för webbläsare som stöder funktionen.

Framtiden för villkorlig stilsättning

@when-regeln representerar ett betydande steg framåt för CSS. Den möjliggör mer uttrycksfull och dynamisk stilsättning, vilket banar väg för mer komplexa och responsiva webbapplikationer. I takt med att webbläsarstödet förbättras och specifikationen utvecklas, kommer @when-regeln troligen att bli ett oumbärligt verktyg för webbutvecklare.

Ytterligare framsteg inom CSS Houdini och standardiseringen av anpassade tillstånd kommer att ytterligare förstärka kapaciteten hos @when, vilket möjliggör ännu mer detaljerad kontroll över stilsättning och en smidigare integration med JavaScript.

Slutsats

CSS @when-regeln erbjuder ett kraftfullt och flexibelt sätt att tillämpa stilar villkorligt baserat på container queries, anpassade tillstånd, CSS-variabler och andra kriterier. Även om webbläsarstödet fortfarande utvecklas, är det ett värdefullt verktyg att ha i din arsenal för att skapa dynamiska och responsiva webbdesigner som anpassar sig till olika sammanhang och användarpreferenser. Genom att förstå grunderna i @when-regeln och följa bästa praxis kan du låsa upp dess fulla potential och skapa verkligt exceptionella användarupplevelser. Kom ihåg att alltid testa noggrant i olika webbläsare och på olika enheter för att säkerställa kompatibilitet och optimal prestanda.

I takt med att webben fortsätter att utvecklas är det avgörande att anamma nya CSS-funktioner som @when för att ligga i framkant och leverera banbrytande webbupplevelser till en global publik.